import React, { useState, useEffect } from 'react';
import { Tree, Form, Input, TreeSelect, Select, InputNumber } from 'antd';
import './style.less';
export default function Index() {
  const [treeLine, setTreeLine] = useState(true);
  const [showLeafIcon, setShowLeafIcon] = useState(false);
  const [willData, setWillData] = useState();
  const [value, setValue] = useState();
  const onChange = (newValue) => {
    console.log(newValue);
    setValue(newValue);
  };
  // 点击树节点回调函数
  const onSelect = (selectedKeys, info) => {
    let obj = {
      id: info.node.key,
      showdesc: info.node.key,
      typename: info.node.title,
      authtype: 1,
    };
    setWillData(JSON.parse(JSON.stringify(obj)));
  };
  useEffect(() => {
    console.log(willData);
  }, [willData]);
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  // 选择框 回调
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  const treeData = [
    {
      title: '文档中心',
      value: '0',
      key: '0',
      children: [
        {
          title: '人事制度',
          value: '1',
          key: '1',
        },
        {
          title: '营销制度',
          value: '2',
          key: '2',
        },
        {
          title: '产品资料',
          value: '3',
          key: '3',
        },
        {
          title: '工作笔记',
          value: '4',
          key: '4',
        },
      ],
    },
  ];
  return (
    <div className="data">
      <div className="dataTop">
        <button>新增</button>
        <button>保存</button>
        <button>删除</button>
      </div>
      <div className="dataMain">
        <div className="DMLeft">
          <Tree
            style={{
              height: '100%',
            }}
            showLine
            defaultExpandAll
            onSelect={onSelect}
            treeData={treeData}
          />
        </div>
        <div className="DMRight">
          <div className="DMRTop">
            <Form
              name="basic"
              labelCol={{
                span: 2,
              }}
              initialValues={willData}
              onFinish={onFinish}
              autoComplete="off"
            >
              <Form.Item
                label="分类名称"
                rules={[
                  {
                    required: true,
                    message: '请输入分类名称!',
                  },
                ]}
              >
                {/* <Input value={willData.typename} /> */}
                <Input />
              </Form.Item>

              <Form.Item
                label="上级分类"
                name="parenttype"
                rules={[
                  {
                    required: true,
                    message: '请输入上级分类!',
                  },
                ]}
              >
                <TreeSelect
                  treeLine={
                    treeLine && {
                      showLeafIcon,
                    }
                  }
                  showSearch
                  style={{
                    width: '100%',
                  }}
                  value={value}
                  dropdownStyle={{
                    maxHeight: 400,
                    overflow: 'auto',
                  }}
                  allowClear
                  treeDefaultExpandAll
                  onChange={onChange}
                  treeData={treeData}
                />
              </Form.Item>
              <Form.Item label="权限类别" name="authtype">
                <Select
                  style={{
                    width: '100%',
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '',
                      label: '',
                    },
                    {
                      value: '1',
                      label: '按照角色分配',
                    },
                    {
                      value: '2',
                      label: '按照人员分配',
                    },
                  ]}
                />
              </Form.Item>
              <Form.Item
                label="显示顺序"
                name="showdesc"
                rules={[
                  {
                    required: true,
                    message: '请输入显示顺序!',
                  },
                ]}
              >
                <Input placeholder="数组越小，排列越靠前" />
              </Form.Item>
            </Form>
            {/* <Input value={typename}></Input> */}
          </div>
          <div className="DMRBottom"></div>
        </div>
      </div>
    </div>
  );
}
